// @ts-ignore
import React from 'react';
import {useNavigate} from 'react-router-dom';
import {Building2, Heart, Megaphone, PartyPopper, Snowflake, Sun, Target, Zap} from 'lucide-react';

const navItems = [
  { icon: <Building2 className="w-7 h-7" />, label: '分销商会议', id: 'dealer-meeting', color: 'from-purple-500 to-purple-600' },
  { icon: <Snowflake className="w-7 h-7" />, label: '寒冰亮剑', id: 'ice-sword', color: 'from-cyan-500 to-cyan-600' },
  { icon: <Heart className="w-7 h-7" />, label: '客户答谢会', id: 'customer-thanks', color: 'from-pink-500 to-pink-600' },
  { icon: <PartyPopper className="w-7 h-7" />, label: '新春年会', id: 'new-year', color: 'from-red-500 to-red-600' },
  { icon: <Zap className="w-7 h-7" />, label: '春雷行动', id: 'spring-thunder', color: 'from-blue-500 to-blue-600' },
  { icon: <Megaphone className="w-7 h-7" />, label: '520路演', id: '520-roadshow', color: 'from-indigo-500 to-indigo-600' },
  { icon: <Sun className="w-7 h-7" />, label: '骄阳行动', id: 'sunshine', color: 'from-orange-500 to-orange-600' },
  { icon: <Target className="w-7 h-7" />, label: '目标冲刺动员', id: 'target-sprint', color: 'from-green-500 to-green-600' }
];

export default function Navigation() {
  const navigate = useNavigate();

  return (
    <nav className="bg-white shadow-lg px-4 py-6">
      <div className="grid grid-cols-4 gap-4">
        {navItems.map((item) => (
          <button
            key={item.id}
            onClick={() => navigate(`/category/${item.id}`)}
            className="flex flex-col items-center group"
          >
            <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${item.color} 
              flex items-center justify-center text-white shadow-lg 
              transform transition-all duration-300 group-hover:scale-110 group-hover:rotate-3`}
            >
              {item.icon}
            </div>
            <span className="mt-2 text-sm font-medium text-gray-700 group-hover:text-blue-600 transition-colors">
              {item.label}
            </span>
          </button>
        ))}
      </div>
    </nav>
  );
}